import React from "react"
import SubBanner from "../../components/subBanner"
import Swiper from "swiper"
import "swiper/css/swiper.css"
import {Row, Col} from 'antd'
import "./index.less"
export default class DetailsPage extends React.Component{
    constructor (props) {
        super(props)
    }
    state = {
        swiperList: [
            {
                url: "http://file.cdn-static.cn/3534_w2000.jpg?imageView2/2/w/2000/q/100"
            },
            {
                url: "http://file.cdn-static.cn/3534_w2000.jpg?imageView2/2/w/2000/q/100"
            }
        ]
    }
    componentDidMount(){
        new Swiper('.jz-container',{
            autoplay: {
                stopOnLastSlide: true
            },
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            pagination: {
              el: '.swiper-pagination',
              clickable: true
            },
        })
    }
    render () {
        return (<div >
            <SubBanner></SubBanner>
            <div className="jz_content jz_padding6">
                <div>
                    <div className="jz-container">
                        <div className="swiper-wrapper">
                            <div className="swiper-slide">
                                <img src="http://file.cdn-static.cn/3534_w2000.jpg?imageView2/2/w/2000/q/100" alt=""/>
                            </div>
                            <div className="swiper-slide">
                                <img src="http://file.cdn-static.cn/3534_w2000.jpg?imageView2/2/w/2000/q/100" alt=""/>
                            </div>
                            <div className="swiper-slide">
                                <img src="http://file.cdn-static.cn/3534_w2000.jpg?imageView2/2/w/2000/q/100" alt=""/>
                            </div>
                        </div>
                        <div className="swiper-button-prev">
                            <span className="jz iconprev jz_prev"></span>
                        </div>
                        <div className="swiper-button-next">
                            <span className="jz iconprev"></span>
                        </div>
                        <div className="swiper-pagination"></div>
                    </div>
                </div>
                <Row gutter={[16, 16]} className="jz_details">
                    <Col md={18}>
                        <div>
                            <div className="jz_details-top">
                                <h3>莫干山裸心谷裸叶水疗中心</h3>
                                <p>商业建筑/度假区</p>
                            </div>
                            <div className="jz_details-con">
                                <p>
                                    以SPG总部大楼为基础的短电影《深入表面》由Claudio Esposito导演，The Piranesi Experience和The Architecture Player联合发行摄影师用不同的镜头对建筑进行了拍摄，深入挖掘了建筑师所提供的抽象的概念化维度
                                </p>
                                <h3>▼ 有未来感的小空间</h3>
                                <p>嘉里中心设计的一个具有未来感的小空间。提拉、推伸的线性体块对空间进行包裹，巨大的倾斜面在不干扰功能的情况下，形成新的张力和景观。</p>
                                <p>在这个全部不锈钢打造的小空间里，存粹的质感成为体验的第一要素，这是一个与未来对话的休憩地。</p>
                            </div>
                        </div>
                    </Col>
                    <Col md={6}>
                        <ul className="jz_details-rf">
                            <li>
                                <span className="jz_details-rf-name">设计时间：</span>
                                <span>2001年3月</span>
                            </li>
                            <li>
                                <span className="jz_details-rf-name">建成时间：</span>
                                <span>2003年3月</span>
                            </li>
                            <li>
                                <span className="jz_details-rf-name">面积（平方米）：</span>
                                <span>278.868</span>
                            </li>
                            <li>
                                <span className="jz_details-rf-name">位置：</span>
                                <span>法国</span>
                            </li>
                            <li>
                                <span className="jz_details-rf-name">建设单位：</span>
                                <span>三亚盈湾旅业有限公司</span>
                            </li>
                        </ul>
                    </Col>
                </Row>
            </div>
        </div>)
    }
}